<template>
	<div>
		<div class="mineNav">
			<MineNav :navTitle="navTitle" />
		</div>
		<router-link :to="{name:'mineIndex'}">
			<img class="leftArrow" src="../../../../assets/images/dynamicState/37/f-1.png" alt="" />
		</router-link>
		
		<div class='mineResetBody'>
			<div class="setRemind">
				<p>新消息提醒</p>
				<img :src="newsRemind" alt="" v-if="remindShow" @click="changShow"/>
				<img :src="oldRemind" alt="" v-else @click="changShow"/>
			</div>
			<div class="passwordMsy">
				<div class="resetPass">
					<p>修改密码</p>
					<router-link to="recompose">
						<img :src="rightRow" alt="" />
					</router-link>
				</div>
				<div class="bdPass">
					<p>绑定密码</p>
					<router-link to="bound">
						 <img :src="rightRow" alt="" />
					</router-link>
				   
				</div>
			</div>	
			<div class='tuiChu'>
				<router-link :to="{name:'mainPage'}" @click.native="tuiChu">
					<p>退出登录</p>
				</router-link>
				
			</div>
		</div>
	</div>
</template>

<script>
	import MineNav from "../../public/mineNav"
	export default {
		data(){
			return{
				navTitle:"设置",
				remindShow:true,
				newsRemind:require("../../../../assets/images/mine/56/set_switch_off.png"),
				oldRemind:require("../../../../assets/images/mine/56/set_switch_on.png"),
				rightRow:require("../../../../assets/images/mine/47/rightRow.png")
			}
		},
		components:{
			MineNav
		},
		methods:{
			changShow(){
				this.remindShow = !this.remindShow
			},
			tuiChu(){
				localStorage.clear();
			}
		}
	}
</script>

<style scoped lang="less">
	@current: 100rem;
	.mineNav {
		height: 88/@current;
	}
	.leftArrow {
		position: fixed;
		top: 26/@current;
		left: 40/@current;
		z-index: 333;
		width: 22/@current;
	}
	.mineResetBody{
		width:100%;
		margin-top:20/@current;
		.setRemind{
			width:100%;
			height:90/@current;
			background:white;
			border-top:1/@current solid #d7d2e0;
			border-bottom:1/@current solid #d7d2e0;
			p{
				color:#1b1b1b;
				font-size:36/@current;
				float:left;
				margin-left:30/@current;
				height:90/@current;
				line-height:90/@current;
			}
			img{
				float:right;
				margin-right:30/@current;
				width:100/@current;
				margin-top:15/@current;
			}
		}
		.passwordMsy{
			width:100%;
			margin-top:40/@current;
			background:white;
			border-top:1/@current solid #d7d2e0;
			border-bottom:1/@current solid #d7d2e0;
			.resetPass,.bdPass{
				width:590/@current;
				height:90/@current;
				margin-left:30/@current;
				border-bottom:1/@current solid #d7d2e0;
				p{
					color:#1b1b1b;
					font-size:36/@current;
					float:left;
					/*margin-left:30/@current;*/
					height:90/@current;
					line-height:90/@current;
				}
				img{
					float:right;
					margin-right:10/@current;
					width:15/@current;
					height:30/@current;
					margin-top:30/@current;
				}
			}
			.bdPass{
				border:none;
			}
			
		}
		.tuiChu{
			width:100%;
			height:90/@current;
			background:white;
			border-top:1/@current solid #d7d2e0;
			border-bottom:1/@current solid #d7d2e0;
			margin-top:452/@current;
			p{
				text-align:center;
				height:90/@current;
				line-height:90/@current;
				font-size:36/@current;
				color:#e43c3c;
			}
		}
	}

</style>